<template>
  <div class="searchHeader" :class="`themeTop-${themeColor.theme}`">
    <!-- 左侧 -->
    <div class="search">
      <div class="searchLeft">
        <div v-for="(item, i) in icon" :key="item" v-show="i <= 2">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="item"></use>
          </svg>
        </div>
        <!-- 右侧按钮 -->
        <svg
          class="icon"
          aria-hidden="true"
          v-for="(item, i) in icon"
          :key="item"
          v-show="i >= 3"
        >
          <use :xlink:href="item"></use>
        </svg>
      </div>

      <div class="searchRight">
        <input type="text" placeholder="请输入内容" />
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="loginInfo">
      <!-- 粉色登录按钮 -->
      <span @click="LoginTop = '50%'"></span>
      <div>
        <div class="svg">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yifuhuanfu"></use>
          </svg>
          <div class="theme">
            <p>主题</p>
            <div>
              <p v-for="item in theme" :key="item" @click="handleTheme(item)">
                {{ item }}
              </p>
            </div>
          </div>
        </div>
        <!-- div 不可删 icon图标不能使用伪元素 -->
        <div class="svg">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-contact"></use>
          </svg>
        </div>
        <p>代</p>
      </div>
    </div>
  </div>
  <!-- 登录弹框 -->
  <div class="perspective">
    <div
      class="login"
      :style="animation ? 'transform: translate3d(0, -200%, -100px)' : ''"
    >
      <p @click="animationLogin">x</p>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-shouji"></use>
      </svg>
      <div class="PWD">
        <input type="text" placeholder="请输入手机号" v-model="phone" />
        <input
          :type="hiddenVisible ? 'text' : 'password'"
          placeholder="请输入密码"
          v-model="PWD"
        />
        <!-- 隐藏显示切换 -->
        <svg class="icon" aria-hidden="true" @click="hiddenVisible = !hiddenVisible">
          <use
            :xlink:href="hiddenVisible ? '#icon-zitiyulan' : '#icon-yanjing_yincang'"
          ></use>
        </svg>
      </div>
      <button>登录</button>
      <button>注册</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useThemeColor } from "@/store/themeColor";
const themeColor = useThemeColor();
const messageBG = ref("#fff");
const phone = ref();
const PWD = ref();
// 密码框颜色隐藏
const hiddenVisible = ref(true);
// 登录框
const animation = ref(false);
const LoginTop = ref("-170%");
// 换肤功能
const handleTheme = (theme: string) => {
  themeColor.$patch((state) => {
    state.theme = theme == "优雅白" ? "white" : theme == "炫酷黑" ? "black" : "deeppink";
  });
  messageBG.value =
    theme == "优雅白" ? "#fff" : theme == "炫酷黑" ? "#585e6b" : "deeppink";
};
const theme = ["优雅白", "炫酷黑", "清新粉"];

const icon = [
  "#icon-shouye1",
  "#icon-suoxiao",
  "#icon-fangda",
  "#icon-left-1",
  "#icon-right-1-copy",
];

const animationLogin = () => {
  animation.value = true;
  setTimeout(() => {
    animation.value = false;
    LoginTop.value = "-170%";
  }, 1000);
};
</script>

<style lang="less" scoped>
.perspective {
  transition: all 0.3s;
  perspective: 100px;
  position: fixed;
  top: v-bind(LoginTop);
  left: 50%;
  transform: translate(-50%, -50%);
  .login {
    transition: all 1s;
    z-index: 111;
    width: 515px;
    height: 720px;
    background-color: #fafafa;
    text-align: center;
    > P {
      margin-top: 10px;
      margin-left: 94%;
      font-size: 22px;
    }
    > .icon {
      font-size: 100px;
      margin-top: 90px;
    }
    > .PWD {
      position: relative;
      > .icon {
        position: absolute;
        top: 81%;
        left: 70%;
        font-size: 22px;
      }
      input {
        padding: 0 10px;
        margin-top: 40px;
        border-radius: 5px;
        outline-style: none;
        width: 255px;
        height: 40px;
        border: 1px solid #dcdfe6;
      }
    }
    button {
      width: 257px;
      height: 50px;
      border-radius: 10px;
      background-color: #e83c3c;
      color: #fff;
      border: 0;
      display: block;
      margin: 0 auto;
    }
    button:nth-child(3) {
      margin-top: 40px;
    }
    button:nth-child(4) {
      background-color: #fafafa;
      color: black;
    }
  }
}
.searchHeader {
  z-index: 888;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 75px;
  display: flex;
  justify-content: space-between;
  .search {
    width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .searchLeft {
      width: 400px;
      height: 75px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
      > div {
        width: 25px;
        height: 25px;
        border-radius: 100%;
        text-align: center;
        overflow: hidden;
        > .icon {
          margin: auto;
          display: block;
          transform: translateY(-20px);
          transition: all 0.3s;
        }
      }
      > .icon {
        width: 25px;
        height: 25px;
      }
      div:hover .icon {
        transform: translateY(4px);
      }
      div:nth-child(1) {
        background-color: #ed655a;
      }
      div:nth-child(2) {
        background-color: #e0c04c;
      }
      div:nth-child(3) {
        background-color: #72be47;
      }
    }
    .searchRight {
      width: 257px;
      margin-left: 50px;
      position: relative;
      height: 40px;
      > input {
        padding: 0 10px;
        width: 257px;
        height: 100%;
        box-sizing: border-box;
        outline: none;
        border: 1px solid var(--BR);
        border-radius: 2px;
        font-size: 14px;
      }
      > .icon {
        position: absolute;
        top: 50%;
        left: 96%;
        transform: translate(-100%, -50%);
      }
    }
  }
  .loginInfo {
    width: 350px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > span {
      border-radius: 100%;
      width: 35px;
      height: 35px;
      background-color: deeppink;
    }
    > div {
      margin-left: 50px;
      flex: 60%;
      font-size: 25px;
      display: flex;
      justify-content: space-evenly;
      .svg:nth-child(1) {
        position: relative;
        &:hover .theme {
          z-index: 4;
          transition: all 0.6s;
          opacity: 1 !important;
        }
        &:hover::before {
          z-index: 6;
          opacity: 1 !important;
          transition: all 0.6s;
        }
        &::before {
          z-index: -1;
          opacity: 0;
          transition: all 0.6s;
          position: absolute;
          content: "";
          display: block;
          border-bottom: 15px solid v-bind(messageBG);
          border-top: 20px solid transparent;
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
          z-index: 111;
          width: 0;
          height: 0;
          top: 16px;
          left: -7px;
          filter: drop-shadow(0px -0.1px 1px #707070);
        }
        > .theme {
          opacity: 0;
          z-index: -1;
          border-radius: 5px;
          filter: drop-shadow(0.1px -0.1px 1px #707070);
          top: 50px;
          position: absolute;
          width: 180px;
          height: 130px;
          display: flex;
          flex-direction: column;
          padding-top: 15px;
          box-sizing: border-box;
          left: -50px;
          background-color: v-bind(messageBG);
          > p {
            font-size: 20px;
            font-weight: 600;
            margin-left: 10px;
          }
          > div {
            width: 159px;
            margin: 5% auto;
            font-size: 16px;
            display: flex;
            flex-grow: 1;
            height: 77px;
            line-height: 77px;
            p:nth-child(1) {
              width: 53px;
              background-color: #fff;
              color: black;
              height: 100%;
            }
            p:nth-child(2) {
              background-color: black;
              color: #fff;
              width: 53px;
              height: 100%;
            }
            p:nth-child(3) {
              background-color: deeppink;
              width: 53px;
              color: #fff;
              height: 100%;
            }
          }
        }
      }

      > .svg:nth-child(2) {
        position: relative;
        transition: all 0.6s;
        &:hover::after {
          visibility: visible;
          transition: all 0.6s;
          opacity: 1 !important;
        }
        &:hover::before {
          visibility: visible;
          opacity: 1 !important;
          transition: all 0.6s;
        }
        &::before {
          visibility: hidden;
          opacity: 0;
          transition: all 0.6s;
          position: absolute;
          content: "";
          display: block;
          border-bottom: 15px solid #fff;
          border-top: 20px solid transparent;
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
          left: 5px;
          top: 25px;
          width: 0;
          height: 0;
          border-width: 10px;
          filter: drop-shadow(0px -0.1px 1px #707070);
          z-index: 5;
        }
        &::after {
          visibility: hidden;
          transition: all 0.6s;
          opacity: 0;
          position: absolute;
          content: "联系我";
          font-size: 12px;
          display: block;
          background-color: #fff;
          border: 1px solid #d2d2d2;
          top: 44px;
          left: -15px;
          text-align: center;
          line-height: 30px;
          width: 60px;
          height: 30px;
          border-radius: 1px;
        }
      }
    }
  }
}
</style>
